<template>
  <n-grid :cols="12" item-responsive responsive="screen">
    <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
      <n-empty description="暂时没有任何东西哦" v-if="chapterMediaList && chapterMediaList.length == 0">
        <template #extra>
        </template>
      </n-empty>
      <n-collapse>
        <template v-for="chapter in chapterMediaList">
          <n-collapse-item :title="chapter.title" :name='chapter.chapterID' class="p-3 rounded"
            style="background-color:#ecf0f1">
            <template #header-extra v-if="(chapter.media.length!=0)">
                  共{{chapter.media.length}}项
            </template>
            <template #header-extra v-if="(chapter.media.length==0)">
                  空章节
            </template>
            <!-- 如果无媒体 -->
            <n-empty description="没有任何媒体哦" v-if="!chapter.media.length">
            </n-empty>
            <n-list class=" rounded">
              <template v-for="media in chapter.media">
                <n-list-item class="mx-4">
                <template #prefix>
                  <n-avatar>
                    <!-- {{media.type}} -->
                      <n-icon v-if="media.type == 'pdf'" :component="DocumentPdf24Filled" size="40" :depth="1" />
                      <n-icon v-else-if="media.type == 'mov' || media.type == 'mp4' || media.type == 'mkv'" :component="MoviesAndTv20Filled" size="40" :depth="1" />
                      <n-icon v-else-if="media.type == 'jpg' || media.type == 'png' || media.type == 'jpeg'" :component="InsertPhotoFilled" size="40" :depth="1" />
                      <n-icon v-else :component="FileTrayFull" size="40" :depth="1" />
                  </n-avatar>
                </template>
                <n-thing>
                  <template #header>
                    <n-button text @click="handleViewFile(media.storgeLocation,media.type,media.MID,media.isDone)">{{media.basicName}}</n-button>
                  </template>
                  <template #header-extra>
                  <n-space>
                    <n-tag type="info">
                      积分:{{media.credit}}
                    </n-tag>
                    <n-tag v-if="media.isDone == true" type="success">
                      已完成
                    </n-tag>
                    <n-tag v-else type="error">
                      未完成
                    </n-tag>
                    </n-space>
                  </template>
                  <template #action>
                    <n-space justify="space-between">
                      <n-text> </n-text>
                      <n-space justify="end">
                        <n-button tag="a" size="small" :href="'/api'+media.storgeLocation" target="_blank">
                          <template #icon>
                            <n-icon>
                              <CloudDownload />
                            </n-icon>
                          </template>
                          下载文件
                        </n-button>
                      </n-space>
                    </n-space>
                  </template>
                </n-thing>
              </n-list-item>
              </template>
            </n-list>
          </n-collapse-item>
        </template>
      </n-collapse>
    </n-gi>
  </n-grid>
  <!-- pdf预览 -->
  <n-modal v-model:show="showPdfModal" preset="card" title="预览PDF" style="height:100vh" class="overflow-scroll" @close="handleClose">
    <PdfView :pdfUrl="pdfUrl" />
  </n-modal>
  <!-- 视频预览 -->
  <n-modal v-model:show="showVedioModal" preset="card" title="预览视频" style="max-width: 800px" @close="handleClose">
    <VedioView :vedioUrl="vedioUrl"
      :mediaID="currentMediaID" :isDone="isDone"></VedioView>
  </n-modal>
  <!--图片预览-->
  <n-modal v-model:show="showPicModal" preset="card" title="预览图片" style="max-width: 800px" @close="handleClose">
    <img :src="imgUrl" alt="previewPic" width="800">
  </n-modal>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { CloudDownload,FileTrayFull} from '@vicons/ionicons5';
import {DocumentPdf24Filled,MoviesAndTv20Filled} from '@vicons/fluent';
import {InsertPhotoFilled} from '@vicons/material';
import PdfView from './pdfView.vue';
import VedioView from './vedioView.vue';
import { viewed } from '@/api/student/chapter'
import {  useMessage } from 'naive-ui';
import { useRoute } from 'vue-router';
import { http } from '@/utils/http/axios';

const pdfUrl = ref('');
const vedioUrl = ref('');
const imgUrl =ref('');
const showPdfModal = ref(false);
const showVedioModal = ref(false);
const showPicModal = ref(false);

const message = useMessage();
const route = useRoute();

const colList = ref([]);

const courseStudentNumber = ref('');
const isDone = ref(false);
const currentMediaID =ref();

const chapterMediaList = ref();

onMounted(
  async () => {
    chapterMediaList.value = await http.request(
      {
        url: '/student/student_chapter_media/list',
        method: 'get',
        params: { courseID: route.params.courseID }
      }
    );

    console.log(chapterMediaList);
    colList.value = chapterMediaList.value.map(v => { return v.chapterID })
    console.log(colList.value);
    let courseInfo = sessionStorage.getItem('courseInfo');
    
    if(courseInfo != null ){
      let ci = JSON.parse(courseInfo);
      console.log(ci);
      if(ci !=null)
        courseStudentNumber.value = ci.studentNumber;
    }
  }
)

function handleViewFile(storgeLocation,type,MID,isdone){
  currentMediaID.value = MID;
  isDone.value = isdone;
  if(type == 'pdf'){
    openPdf(storgeLocation);
    handleFinish();
  }
  else if(type == 'mov' || type == 'mp4' || type == 'mkv'){
    openVedio(storgeLocation);
    //handleFinish();
  }
  else if(type == 'jpg' || type == 'png' || type == 'jpeg'){
    openPic(storgeLocation);
    handleFinish();
  }
  else {
    message.warning('不受支持的类型');
    handleFinish();
  }
}

const openPdf = (url) => {
  showPdfModal.value = true;
  pdfUrl.value = '/api'+url
}

const openVedio = (url) =>{
  showVedioModal.value = true;
  vedioUrl.value = '/api'+url;
}

const openPic = (url) =>{
  showPicModal.value = true;
  imgUrl.value = '/api'+url;
}

const handleFinish = ()=>{
  if(isDone){
        viewed({MID:currentMediaID.value});
    }
}

const handleClose = async () => {
    chapterMediaList.value = await http.request(
      {
        url: '/student/student_chapter_media/list',
        method: 'get',
        params: { courseID: route.params.courseID }
      }
    );

    colList.value = chapterMediaList.value.map(v => { return v.chapterID })
    let courseInfo = sessionStorage.getItem('courseInfo');
    
    if(courseInfo != null ){
      let ci = JSON.parse(courseInfo);
      console.log(ci);
      if(ci !=null)
        courseStudentNumber.value = ci.studentNumber;
    }
  }

</script>

<style scoped>
</style>